<!-- 分组组件 -->
<template>
    <div class="groups">
        <el-row :gutter="1">
            <el-col :span="w">
                <!-- 一级菜单 -->
                <div
                class="menu_item"
                v-for="(item,index) in groups"
                :key="index"
                @click="getGroup(item)"
                :class="item.name_group == group_name ? 'active' : ''"
                >{{item.name_group_cn}}</div>
            </el-col>
            <el-col :span="24-w">
                <!-- 二级菜单 -->
                <div
                class="menu_item"
                v-for="(item,index) in group_childs"
                :key="index"
                @click="getItem(item)"
                :class="item.name_group == group_child_name ? 'active' : ''"
                >{{item.name_group_cn}}</div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return {
            fid:0,
            w:24,
            groups:[],
            group_childs:[],
            group_name:"",
            group_child_name:"",
            loading:false
        }
    },
    methods:{
        // 获取配置项列表
        getItem(item){
            this.group_child_name = item.name_group
            this.$emit("config",item.name_group)
        },
        // 获取分组信息
        getGroup(item){
            var that = this
            that.fid = item.id
            that.group_name = item.name_group
            that.$axios.get('api:config/get.group',{params:{fid:that.fid}}).then(res=>{
                if(res.total > 0){
                    that.w = 12
                    that.group_childs = res.data
                    that.getItem(res.data[0])
                } else {
                    that.getItem(item)
                }
            })
        },
        // 页面初始化
        initData(){
            var that = this
            that.$axios.get('api:config/get.group',{params:{fid:that.fid}}).then(res=>{
                that.groups = res.data
                if(res.data.length > 0 ){
                    that.getGroup(res.data[0])
                }
            })
        }
    },
    created(){
        this.initData()
    }
}
</script>
<style lang="less" scoped>
// 配置项分组样式表
.groups{
    min-height: 420px;
    .menu_item{
        cursor:pointer;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ececec;
        font-size: 16px;
        line-height: 50px;
        overflow: hidden;
        text-align: center;
        &.active{
            background-color: #409eff;
            color: #ffffff;
        }
    }
}
</style>